<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.permission') }}</h2>
        </template>
        <template v-slot:after>
          <el-button type="primary" icon="el-icon-edit" size="medium" style="margin-left: 10px;" class="filter-item" :disabled="!checkPermission('permission-add')" @click="addMenu('add',0)">{{ $t('button.add') }}</el-button>
        </template>
      </PageTitle>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" :data="list" border max-height="700px" style="margin-top: 20px;" row-key="id" default-expand-all:false :tree-props="{children:'children'}">
        <el-table-column v-if="languages==='zh'" :label="$t('table.powerTitle')" prop="name" />
        <el-table-column v-if="languages==='en'" :label="$t('table.powerTitle')" align="center" prop="name_en[1].name" />
        <el-table-column :label="$t('table.powerCode')" align="center" prop="path" />
        <el-table-column v-if="languages==='zh'" :label="$t('table.describe')" align="center" prop="title" />
        <el-table-column v-if="languages==='en'" :label="$t('table.describe')" align="center" prop="name_en[1].remarks" />
        <el-table-column :label="$t('table.state')" prop="status" width="120">
          <template slot-scope="{row}">
            <el-tag :type="row.hidden|statusFilter">
              {{ row.hidden|formatEmployment }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-if="row.type==1" type="success" size="mini" :disabled="!checkPermission('permission-add-sub')" @click="addMenu('add',row.id)">{{ $t('button.addSubPermissions') }}</el-button>
            <el-button type="primary" size="mini" :disabled="!checkPermission('permission-edit')" @click="addMenu('edit',row)">{{ $t('button.edit') }}</el-button>
            <el-button size="mini" :disabled="!checkPermission('permission-del')" @click="delMenu(row)">{{ $t('button.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加 -->
    <el-dialog :title="dialogTitle" :visible="showDialog" @close="btnCanle">
      <el-form ref="ruleForm" :model="formData" label-width="180px" :rules="rules">
        <el-form-item :label="$t('table.zhTitle')" prop="name">
          <el-input v-model="formData.name" style="width: 50%;" :placeholder="$t('table.enterThe')+' '+$t('table.zhTitle')" />
        </el-form-item>
        <el-form-item :label="$t('table.enTitle')" prop="Enname">
          <el-input v-model="formData.name_en[1].name" style="width: 50%;" :placeholder="$t('table.enterThe')+' '+$t('table.enTitle')" />
        </el-form-item>
        <el-form-item :label="$t('table.powerCode')" prop="path">
          <el-input v-model="formData.path" style="width: 50%;" :placeholder="$t('table.enterThe')+' '+$t('table.powerCode')" />
        </el-form-item>
        <el-form-item :label="$t('table.zhdescribe')" prop="title">
          <el-input v-model="formData.title" style="width: 50%;" :placeholder="$t('table.enterThe')+' '+$t('table.zhdescribe')" />
        </el-form-item>
        <el-form-item :label="$t('table.endescribe')" prop="title">
          <el-input v-model="formData.name_en[1].remarks" style="width: 50%;" :placeholder="$t('table.enterThe')+' '+$t('table.endescribe')" />
        </el-form-item>
        <el-form-item :label="$t('table.type')" prop="type">
          <el-select v-model.number="formData.type" :placeholder="$t('table.selectThe')+' '+$t('table.type')">
            <el-option v-for="(item,index) in menuType" :key="index" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('table.hidden')" prop="type">
          <el-select v-model.number="formData.hidden" :placeholder="$t('table.selectThe')+' '+$t('table.hidden')">
            <el-option v-for="(item,index) in menuhidden" :key="index" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="btnCanle">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="btnOk">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getMenuList, addMenu, delMenu } from '@/api/user'
import { tranListTotreeData } from '@/utils'
import Cookie from 'js-cookie'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      languages: Cookie.get('language'),
      downloadLoading: false,
      list: [],
      query: {},
      count: 0,
      showDialog: false,
      dialogTitle: this.$t('table.addpower'),
      formData: {
        id: undefined,
        name: '',
        parent_id: undefined,
        type: undefined,
        title: '',
        path: '',
        hidden: undefined,
        name_en: [
          { name: '', languages: 'zh', remarks: '' },
          { name: '', languages: 'en', remarks: '' }
        ]
      },
      menuType: [{
        id: 1,
        value: this.$t('table.column')
      },
      {
        id: 2,
        value: this.$t('table.button')
      }],
      menuhidden: [{
        id: 1,
        value: this.$t('table.show')
      },
      {
        id: 2,
        value: this.$t('table.hide')
      }],
      rules: {
        name: [{ required: true, message: this.$t('table.zhTitle') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        type: [{ required: true, message: this.$t('table.type') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        path: [{ required: true, message: this.$t('table.powerCode') + this.$t('prompt.noEmpty'), trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    // 获取权限菜单
    async getMenuList() {
      this.downloadLoading = true
      const { count, list } = await getMenuList(this.query)
      this.list = list

      this.count = count
      // 调用自定义的树状数组函数，处理获取的数组
      if (this.list != null) {
        this.list = tranListTotreeData(this.list, 0)
      }
      this.downloadLoading = false
    },
    // 打开新增修改弹窗
    addMenu(type, row) {
      if (type === 'add') {
        this.dialogTitle = this.$t('table.addpower')
        this.formData.name = ''
        this.formData.id = undefined
        this.formData.parent_id = row
        this.formData.path = ''
        this.formData.type = undefined
        this.formData.title = ''
        this.formData.hidden = undefined
        for (let i = 0; i < this.formData.name_en.length; i++) {
          this.formData.name_en[i].name = ''
          this.formData.name_en[i].remarks = ''
        }
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      } else if (type === 'edit') {
        this.dialogTitle = this.$t('table.editpower')
        this.formData.name = row.name
        this.formData.id = row.id
        this.formData.parent_id = row.parent_id
        this.formData.path = row.path
        this.formData.type = row.type
        this.formData.title = row.title
        this.formData.hidden = row.hidden
        for (let i = 0; i < this.formData.name_en.length; i++) {
          for (let j = 0; j < row.name_en.length; j++) {
            if (this.formData.name_en[i].languages === row.name_en[j].languages) {
              this.formData.name_en[i].name = row.name_en[j].name
              this.formData.name_en[i].remarks = row.name_en[i].remarks
            }
          }
        }
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      }
    },
    // 点击确定时 校验整个表单
    async btnOk() {
      try {
        this.formData.name_en[0].name = this.formData.name
        this.formData.name_en[0].remarks = this.formData.title
        await this.$refs.ruleForm.validate()
        // 调用新增接口
        await addMenu(this.formData)
        // 告诉父组件更新数据
        this.getMenuList()
        this.btnCanle()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(this.$t('prompt.failed'))
      }
    },
    // 取消弹窗
    btnCanle() {
      this.dialogTitle = this.$t('table.addpower')
      this.formData.name = ''
      this.formData.id = undefined
      this.formData.parent_id = undefined
      this.formData.path = ''
      this.formData.type = undefined
      this.formData.title = ''
      for (let i = 0; i < this.formData.name_en.length; i++) {
        this.formData.name_en[i].name = ''
        this.formData.name_en[i].remarks = ''
      }
      this.showDialog = false
    },
    // 删除
    async delMenu(e) {
      const one = {
        id: e.id
      }
      try {
        await this.$confirm(this.$t('prompt.deleteit'))
        await delMenu(one)
        this.getMenuList()
        this.$message.success(this.$t('prompt.deletesuccess'))
      } catch (error) {
        this.$message.error(this.$t('prompt.deletefailed'))
      }
    }
  }
})
</script>
